<template>
  <div class="container" ref="outContainer">
    <div class="item" ref="itemContainer" v-for="item in [1, 2, 3, 4, 5, 6, 7, 8]" :key="item">

    </div>
    <div class="item item_fix" v-for="item in spanNum" key="item"></div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
}

.item {
  min-width: 100px;
  height: 100px;
  flex: 1;
  flex-basis: 0;
  background: orange;
  border-radius: 5px;
  margin-bottom: 10px;
}

@media all and (min-width: 0px) and (max-width: 374px) {

  /* 适用于小于等于767像素的屏幕 */
  .item {
    min-width: 200px;
  }
}

@media all and (min-width: 375px) and (max-width: 767px) {

  /* 适用于小于等于767像素的屏幕 */
  .item {
    min-width: 300px;
  }
}

@media all and (min-width: 768px) and (max-width: 1023px) {

  /* 适用于768像素到1023像素的屏幕 */
  .item {
    min-width: 300px;
  }
}

@media all and (min-width: 1024px) and (max-width: 1920px) {

  /* 适用于1024像素到1920像素的屏幕 */
  .item {
    min-width: 290px;
  }
}

@media all and (min-width: 1921px) and (max-width: 2560px) {

  /* 适用于1921像素到2560像素的屏幕 */
  .item {
    min-width: 300px;
  }
}

@media all and (min-width: 2561px) {

  /* 适用于大于2561像素的屏幕 */
  .item {
    min-width: 300px;
  }
}

.item_fix {
  opacity: 0;
  width: 0;
  height: 0;
  flex-basis: content;
}
</style>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue';

const outContainer = ref(null)
const itemContainer = ref(null)
const spanNum = ref([])

onMounted(() => {
  fillerMethod(document.body.clientWidth)
  window.onresize = () => {                           //实时监听页面宽度是否变化
    return (() => {
      fillerMethod(document.body.clientWidth)
    })();
  }

})

//获取填充数的方法
const fillerMethod = (widthData) => {
  let clientWidthMap = [{ min: 0, max: 374, width: 200 }, { min: 375, max: 767, width: 300 }, { min: 768, max: 1023, width: 300 }, { min: 1024, max: 1920, width: 290 }, { min: 1921, max: 2560, width: 300 }, { min: 2561, max: 9999, width: 300 }]
  //拿到dataBox的div实时宽度/子div宽度（282px）=行中子div数量
  let itemContainerWidth = 0;
  clientWidthMap.forEach((item, index) => {
    if (widthData > item.min && widthData < item.max) {
      itemContainerWidth = item.width
    }
  })
  let columnNum = Math.floor(widthData / itemContainerWidth)
  let remainder = 8 % columnNum  //数组长度%子div数量=取余数量
  let fillerNum = columnNum - remainder                   //行中子div数量-取余数量=填充数量
  let arr = <any>[]
  for (let i = 0; i < fillerNum; i++) {                       //填充数量遍历 组合为数组
    arr.push(i)
  }
  spanNum.value = arr       //赋值
}
</script>